<template>
    <div class="com-container">
        <!-- 步骤条 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';

const endpointUrl =
    'image://';
const achievePointUrl =
    'image://';
const unfinishedPointUrl =
    'image://';
const finishedPointUrl =
    'image://';

@Component({
    name: 'StepChart',
})
export default class StepChart extends Vue {
    @Prop() data;
    private chartInstance: any = null;
    private rippleArr: any[] = []; // 涟漪效果数据
    private linkArr: any[] = []; // 连线数据
    private animationArr: any[] = []; // 连线动画效果数据配置

    private items = [
        // pointType = '1'  代表完成状态   pointType = '0' 代表未完成状态
        { name: '开始', pointType: '1' },
        // { name: '上交所（行情文件）', pointType: '0' },
        // { name: '深交所（行情接口）', pointType: '1' },
        // { name: '行情网关（行情数据）', pointType: '1' },
        // { name: '财汇系统（资讯数据）', pointType: '0' },
        { name: 'T）', pointType: '1' },
        // { name: '估值系统（估值数据）', pointType: '0' },
        { name: 'TT', pointType: '2' },
        { name: 'TTT', pointType: '0' },
    ];

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                // that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initLines(this.items, this.rippleArr, this.linkArr, this.animationArr);
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            backgroundColor: '#000D1D', // 背景颜色  #483D8B
            legend: [],
            xAxis: {
                show: false,
                type: 'value',
            },
            yAxis: {
                show: false,
                type: 'value',
                max: 100,
                min: -100,
            },
            series: [
                {
                    type: 'effectScatter',
                    symbolSize: 14,
                    color: 'rgba(0, 233, 255, 1)', // 涟漪的颜色rgba(0, 233, 255, 0.9)
                    data: this.rippleArr,
                    showEffectOn: 'render', // 配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
                    rippleEffect: {
                        // 涟漪特效相关配置。
                        period: 2, // 动画的时间。
                        scale: 3, // 动画中波纹的最大缩放比例。
                        brushType: 'fill', // 波纹的绘制方式，可选 'stroke' 和 'fill'。
                    },
                },
                {
                    type: 'graph',
                    fixed: true,
                    draggable: true, // 图形元素是否可以被拖拽。
                    layout: 'force',
                    coordinateSystem: 'cartesian2d',
                    symbolSize: [30, 30],
                    z: 3,
                    circular: {
                        rotateLabel: true,
                    },

                    itemStyle: {
                        normal: {
                            shadowColor: 'none',
                        },
                    },
                    force: {
                        gravity: 0.3,
                        edgeLength: 85,
                        layoutAnimation: true,
                        friction: 0.07,
                    },
                    data: this.items,
                    lineStyle: {
                        color: '#aaa',
                        width: 4,
                    },
                },
                {
                    type: 'lines',
                    coordinateSystem: 'cartesian2d',
                    z: 1,
                    data: this.linkArr, // 连线数据
                },
                {
                    type: 'lines',
                    coordinateSystem: 'cartesian2d',
                    z: 3,
                    effect: {
                        show: true,
                        smooth: false,
                        trailLength: 0,
                        symbol:
                            'image://',
                        color: 'rgba(0, 233, 255)', // 光标的颜色
                        symbolSize: [50, 80], // 图标的大小
                        period: 4, // 图标运动的周期
                        delay: 0, // 图标运动延迟时间
                    },
                    data: this.animationArr, // 连线动画效果数据配置
                },
            ],
        };
        this.chartInstance.setOption(initOption);
        let _this = this;
        setInterval(function() {
            initOption.series[0].symbolSize = 20;
            _this.chartInstance.setOption(initOption); // true
            setTimeout(function() {
                initOption.series[0].symbolSize = 14;
                _this.chartInstance.setOption(initOption); // true
            }, 1000); // 在此处延迟1秒再执行下一段代码块（调自己）
        }, 4000);
    }

    initLines(items, rippleArr, linkArr, animationArr) {
        var beginValue = [];
        var achiveValue = [];
        var endValue = [];
        items.forEach((el, index) => {
            el.value = [-100 + index * (200 / (items.length - 1)), 50]; // 位置坐标按照节点数量均分
            if (el.pointType == '1') {
                el.symbol = finishedPointUrl;
                el.itemStyle = {
                    color: 'rgba(0, 233, 255)', // 未完成节点的颜色
                };
            }
            if (el.pointType == '0') {
                el.symbol = unfinishedPointUrl;
                el.itemStyle = {
                    color: 'rgba(0, 233, 255,0.5)', // 未完成节点的颜色
                };
            }
            if (el.pointType == '2') {
                achiveValue = el.value;
                el.symbol = achievePointUrl;
                el.symbolSize = [30, 30];
                el.ripple = true;
                el.itemStyle = {
                    color: 'rgba(0, 233, 255,0.5)', // 未完成节点的颜色
                };
            }
            if (index == 0 || index == items.length - 1) {
                el.symbol = 'rect';
                el.symbolSize = [2, 25];
            }
            if (el.ripple == true) {
                rippleArr.push(el.value);
            }
            if (!el.label) {
                el.label = {
                    show: true, // 是否显示标题
                    fontSize: 14, // 标题的字体大小
                    color: 'rgba(255, 255, 255, 0.7)', // 标题的颜色
                    position: 'bottom', // 标签的位置
                    align: 'center', // 标签的文字水平对齐方式
                    rotate: 0, // 标签旋转角度 从 -90 度到 90 度。正值是逆时针
                    offset: [0, 0], // 对标签进行偏移   例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40
                };
                if (el.symbol == 'rect') {
                    el.label.offset = [0, 2];
                }
            }
            if (index == 0) {
                beginValue = el.value;
            }
            if (index == items.length - 1) {
                endValue = el.value;
            }
        });
        console.log(items, beginValue, achiveValue, endValue);
        linkArr.push([
            {
                coord: beginValue,
                lineStyle: {
                    width: 4, // 已完成连线的粗细
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        1,
                        0, // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                        [
                            { offset: 0, color: 'rgba(0, 233, 255, 0.3)' },
                            { offset: 1, color: 'rgba(0, 233, 255, 0.7)' },
                        ] // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                    ),
                    curveness: 0, // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。
                },
            },
            {
                coord: achiveValue,
            },
        ]);

        linkArr.push([
            {
                coord: achiveValue,
                lineStyle: {
                    width: 4, // 未完成连线的粗细
                    color: 'rgba(0, 106, 255, 0.3)', // 未完成连线的颜色
                    curveness: 0, // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。
                },
            },
            {
                coord: endValue,
            },
        ]);

        animationArr.push([
            {
                coord: beginValue,
                lineStyle: {
                    width: 4,
                    color: 'rgba(0, 106, 255, 0)',
                    curveness: 0,
                },
            },
            {
                coord: [achiveValue[0] - 2, achiveValue[1]],
            },
        ]);
        this.initChart();
    }

    updateChart(e) {
        const dataOption = {
            xAxis: { data: e.xAxisData },
            series: e.data,
        };
        this.chartInstance.setOption(dataOption);
    }

    screenAdapter() {
        const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    barWidth: titleFontSize,
                },
            ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    destroyed() {
        // window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
